<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>携程网移动端首页</title>
  <!-- 注意引入顺序 -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <!-- 搜索栏 -->
  <div class="search">
    <div class="search-box">
      <div class="search-b-content">
        <span>搜索:目的地/酒店/景点/航班号</span>
      </div>
    </div>
    <a href="#" class="search-mine">
      <span>我 的</span>
    </a>
  </div>
  <!-- 横幅 -->
  <header class="banner">
    <img src="upload/bg.png" alt="">
  </header>
  <!-- 局部导航栏 -->
  <div class="nav-local">
    <ul>
      <li><a href="#"><span class="nav-l-gljd"></span><span>攻略·景点</span></a></li>
      <li><a href="#"><span class="nav-l-mphd"></span><span>门票·活动</span></a></li>
      <li><a href="#"><span class="nav-l-msl"></span><span>美食林</span></a></li>
      <li><a href="#"><span class="nav-l-zby"></span><span>周边游</span></a></li>
      <li><a href="#"><span class="nav-l-yry"></span><span>一日游</span></a></li>
    </ul>
  </div>
  <!-- 主体导航栏 -->
  <div class="nav-main">
    <div class="nav-m-common">
      <a href="#" class="nav-m-items nav-m-hotel"><span>酒店</span></a>
      <a href="#" class="nav-m-items nav-m-mskz"><span>民宿·客栈</span></a>
      <a href="#" class="nav-m-items nav-m-special"><span>特价·爆款</span></a>
    </div>
    <div class="nav-m-common">
      <a href="#" class="nav-m-items nav-m-flight"><span>机票</span></a>
      <a href="#" class="nav-m-items nav-m-train"><span>火车票</span></a>
      <a href="#" class="nav-m-items"><span>汽车·船票</span></a>
      <a href="#" class="nav-m-items nav-m-last"><span>专车·租车</span></a>
    </div>
    <div class="nav-m-common">
      <a href="#" class="nav-m-items nav-m-travel"><span>旅游</span></a>
      <a href="#" class="nav-m-items nav-m-sjt"><span>私家团</span></a>
      <a href="#" class="nav-m-items"><span>邮轮游</span></a>
      <a href="#" class="nav-m-items nav-m-last"><span>定制游</span></a>
    </div>
  </div>
  <!-- 分类导航栏 -->
  <div class="nav-kinds">
    <ul>
      <li><a href="#"><span class="nav-k-ziyou"></span><span>自由行</span></a></li>
      <li><a href="#"><span class="nav-k-wifi"></span><span>WiFi电话卡</span></a></li>
      <li><a href="#"><span class="nav-k-safe"></span><span>保险·签证</span></a></li>
      <li><a href="#"><span class="nav-k-buy"></span><span>换钞·购物</span></a></li>
      <li><a href="#"><span class="nav-k-car"></span><span>向导·包车</span></a></li>
      <li><a href="#"><span class="nav-k-flight"></span><span>特价机票</span></a></li>
      <li><a href="#"><span class="nav-k-gift"></span><span>礼品卡</span></a></li>
      <li><a href="#"><span class="nav-k-loan"></span><span>申卡·借钱</span></a></li>
      <li><a href="#"><span class="nav-k-community"></span><span>社区</span></a></li>
      <li><a href="#"><span class="nav-k-more"></span><span>更多</span></a></li>
    </ul>
  </div>
  <!-- 底部工具栏 -->
  <div class="tool">
    <!-- TODO 未完成-->
  </div>
</body>

</html>